
//环球猎手新增店铺弹框


import React, { useState } from "react";
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { Button, Input, Form, Modal } from 'antd';
import { layout1 } from '@/utils/config';
import { authHqbs } from '@/services/user';
import { getCurrentUser } from '@/utils/authority';
import { useNavigate } from 'react-router-dom';

const hqls = 'https://imgniu.zhaojiafang.com/hqls.png';

export default ({ visible, handleVisible }) => {
	const navigate = useNavigate();
  const [ form ] = Form.useForm();
  const [ loading, setLoading ] = useState(false);
  const handleClick = () => {
    form.validateFields().then(val => {
      handleSubmit();
    }).catch(err => {
    })
  }

  const handleSubmit = async () => {
    setLoading(true);
    const { account, appsecret } = form.getFieldsValue();
    const res = await authHqbs({
      account,
      appsecret,
      uuid: getCurrentUser().uuid,
    })
    setLoading(false);
    if(res) {
      Modal.success({
        content: '授权成功',
        onOk() {
          navigate(0);
        }
      });
    } else {
      Modal.error({
        title: '授权失败',
        content: '请核实账号和秘钥！'
      })
    }
  }

  return (
    <CommonModal
      title='新增网店'
      visible={visible}
      onCancel={() => handleVisible(false)}
      width='600px'
      footer={[
        <Button onClick={() => handleVisible(false)} key="cancel">取消</Button>,
        <Button onClick={handleClick} key="confirm" type="primary">立即授权</Button>,
      ]}
    >
      <Form 
        { ...layout1 } 
        form={form}
        name="global-catcher-modal"
      >
        <Form.Item 
          name="plat_name" 
          label="当前平台"
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
            <div style={{ width: '125px', height: '65px', background: '#f8f8f8' }}>
              <img src={hqls} style={{ width: '100%', height: '100%'}} />
            </div>
          </div>
        </Form.Item>
        <Form.Item 
          name="account" 
          label="授权账号"
          rules={[
            { required: true, message: '账号未填写' }
          ]}
        >
          <Input placeholder="请输入账号" />
        </Form.Item>
        <Form.Item 
          name="appsecret" 
          label="授权密匙"
          extra="授权账号、密钥并非登录账号、密码，商家在店铺后台->配送管理->发货地管理点击 erp对接信息 ，即可显示正式的账号（partner）和密钥（key）"
          rules={[
            { required: true, message: '密匙未填写' }
          ]}
        >
          <Input placeholder="请输入密匙" />
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};